<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>后台管理系统</title>
    <!-- Bootstrap 5 CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Bootstrap Icons -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"
    />
    <style>
      :root {
        --sidebar-width: 250px;
        --sidebar-collapsed-width: 80px;
        --transition-time: 0.3s;
      }
      html,
      body,
      #app {
        height: 100vh;
      }
      body {
        overflow-y: hidden;
      }

      .sidebar {
        width: var(--sidebar-width);
        min-height: 100vh;
        background-color: #212529;
        color: white;
        transition: width var(--transition-time);
        position: fixed;
        z-index: 1000;
      }

      .sidebar.collapsed {
        width: var(--sidebar-collapsed-width);
      }

      .sidebar.collapsed .logo span,
      .sidebar.collapsed .nav-link span {
        display: none;
      }

      .sidebar.collapsed .logo {
        padding: 1rem 0.5rem;
        justify-content: center;
      }

      .sidebar.collapsed .nav-link {
        text-align: center;
        padding: 0.75rem 0;
      }

      .sidebar.collapsed .nav-link i {
        margin-right: 0;
      }

      .sidebar .nav-link {
        color: rgba(255, 255, 255, 0.75);
        padding: 0.75rem 1rem;
        border-radius: 0.25rem;
        margin-bottom: 0.25rem;
        white-space: nowrap;
        transition: all var(--transition-time);
      }

      .sidebar .nav-link:hover {
        color: white;
        background-color: rgba(255, 255, 255, 0.1);
      }

      .sidebar .nav-link.active {
        color: white;
        background-color: #0d6efd;
      }

      .sidebar .nav-link i {
        margin-right: 15px;
        transition: margin var(--transition-time);
        width: 20px;
        text-align: center;
      }

      .logo {
        font-weight: bold;
        font-size: 1.5rem;
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        transition: all var(--transition-time);
      }

      .logo i {
        margin-right: 10px;
        flex-shrink: 0;
        color: #7952b3; /* Bootstrap紫色 */
      }

      .logo span {
        /* flex-grow: 1; */
        text-align: center;
        /* padding-right: 20px; */
      }

      .main {
        margin-left: var(--sidebar-width);
        transition: margin-left var(--transition-time);
      }

      .main.collapsed {
        margin-left: var(--sidebar-collapsed-width);
      }

      .toggle-sidebar {
        cursor: pointer;
        margin-right: 15px;
        font-size: 1.5rem;
        font-weight: bold;
      }

      .breadcrumb-container {
        margin-right: auto;
        padding-left: 1rem;
      }

      .breadcrumb {
        background-color: transparent;
        padding: 0.75rem 0;
        margin-bottom: 0;
      }
    </style>
  </head>
  <body>
    <div class="d-flex" id="app">
      <!-- 侧边导航栏 -->
      <div class="sidebar" id="sidebar">
        <!-- Logo - 使用Bootstrap官方logo图标 -->
        <div class="logo">
          <i class="bi bi-bootstrap-fill" style="font-size: 2.5rem"></i>
          <span>后台管理系统</span>
        </div>

        <!-- 一级导航菜单 -->
        <ul class="nav flex-column px-2" id="sidebarMenu">
          <li class="nav-item">
            <a
              class="nav-link"
              href="dashboard.html"
              target="iframe"
              data-breadcrumb="仪表盘"
            >
              <i class="bi bi-speedometer2"></i>
              <span>仪表盘</span>
            </a>
          </li>

          <li class="nav-item">
            <a
              class="nav-link"
              href="statistics.html"
              target="iframe"
              data-breadcrumb="数据统计"
            >
              <i class="bi bi-graph-up"></i>
              <span>数据统计</span>
            </a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link active"
              href="users.html"
              target="iframe"
              data-breadcrumb="用户管理"
            >
              <i class="bi bi-people"></i>
              <span>用户管理</span>
            </a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              href="product.html"
              target="iframe"
              data-breadcrumb="产品管理"
            >
              <i class="bi bi-box-seam"></i>
              <span>产品管理</span>
            </a>
          </li>

          <li class="nav-item">
            <a
              class="nav-link"
              href="order.html"
              target="iframe"
              data-breadcrumb="订单管理"
            >
              <i class="bi bi-cart3"></i>
              <span>订单管理</span>
            </a>
          </li>

          <li class="nav-item">
            <a
              class="nav-link"
              href="settings.html"
              target="iframe"
              data-breadcrumb="系统设置"
            >
              <i class="bi bi-gear"></i>
              <span>系统设置</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- 主内容区 -->
      <div
        class="main flex-grow-1"
        id="mainContent"
        style="height: 100%; display: flex; flex-direction: column"
      >
        <!-- 顶部导航 -->
        <nav
          class="navbar navbar-expand-lg navbar-light bg-light border-bottom"
        >
          <div class="container-fluid">
            <div class="d-flex align-items-center">
              <span
                class="navbar-toggler-icon"
                style="cursor: pointer"
                onclick="toggleSidebar()"
              ></span>
            </div>

            <!-- 面包屑导航 - 左对齐 -->
            <div class="breadcrumb-container">
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0" id="breadcrumb">
                  <li class="breadcrumb-item"><a href="#">首页</a></li>
                  <li class="breadcrumb-item active" aria-current="page">
                    仪表盘
                  </li>
                </ol>
              </nav>
            </div>

            <div class="dropdown">
              <a
                href="#"
                class="d-block link-dark text-decoration-none dropdown-toggle"
                id="dropdownUser"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <img
                  src="https://ui-avatars.com/api/?name=Admin&background=6366f1&color=fff"
                  alt="用户头像"
                  width="32"
                  height="32"
                  class="rounded-circle me-2"
                />
                <span>Admin</span>
              </a>
              <ul
                class="dropdown-menu dropdown-menu-end"
                aria-labelledby="dropdownUser"
              >
                <li><a class="dropdown-item" href="#">个人资料</a></li>
                <li><a class="dropdown-item" href="#">设置</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="#">退出登录</a></li>
              </ul>
            </div>
          </div>
        </nav>

        <!-- 页面内容 -->
        <div class="content container-fluid" style="flex: 1">
          <iframe
            name="iframe"
            src="users.html"
            width="100%"
            height="100%"
          ></iframe>
        </div>
      </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
      // 切换侧边栏展开/收缩状态
      function toggleSidebar() {
        const sidebar = document.getElementById("sidebar");
        const mainContent = document.getElementById("mainContent");

        sidebar.classList.toggle("collapsed");
        mainContent.classList.toggle("collapsed");
      }

      // 根据窗口大小自动调整侧边栏状态
      function handleResize() {
        const sidebar = document.getElementById("sidebar");
        const mainContent = document.getElementById("mainContent");

        if (window.innerWidth < 768) {
          sidebar.classList.add("collapsed");
          mainContent.classList.add("collapsed");
        }
      }

      // 更新面包屑导航
      function updateBreadcrumb(activeItem) {
        const breadcrumb = document.getElementById("breadcrumb");
        const breadcrumbText = activeItem.getAttribute("data-breadcrumb");

        breadcrumb.innerHTML = `
                <li class="breadcrumb-item"><a href="#">首页</a></li>
                <li class="breadcrumb-item active" aria-current="page">${breadcrumbText}</li>
            `;

        // 更新内容区标题
        document.getElementById("contentTitle").textContent = breadcrumbText;
      }

      // 菜单点击高亮切换
      function setupMenuHighlight() {
        const menuItems = document.querySelectorAll(
          "#sidebarMenu .nav-link, #mobileSidebar .nav-link"
        );

        menuItems.forEach((item) => {
          item.addEventListener("click", function (e) {
            // e.preventDefault();

            // 移除所有active类
            menuItems.forEach((i) => i.classList.remove("active"));

            // 给当前点击的菜单添加active类
            this.classList.add("active");

            // 更新面包屑导航
            updateBreadcrumb(this);
          });
        });
      }

      // 初始化
      document.addEventListener("DOMContentLoaded", function () {
        handleResize();
        setupMenuHighlight();
      });

      window.addEventListener("resize", handleResize);
    </script>
  </body>
</html>
